var myJs = function() {
  // Step 1: Create jQuery plugin
  // ============================
  $.fn.fancyMorph = function(src, opts) {
    var Morphing = function($btn, opts) {
      var self = this;
      self.opts = $.extend({
        animationEffect: false,
        infobar: false,
        buttons: ["close"],
        smallBtn: false,
        touch: false,
        baseClass: "fancybox-morphing",
        afterClose: function() {
          self.close();
        }
      }, opts);

      self.init($btn);
    };

    Morphing.prototype.init = function($btn) {
      var self = this;

      self.$btn = $btn.addClass("morphing-btn");

      self.$clone = $("<div class=\"morphing-btn-clone\" />")
        .hide()
        .insertAfter($btn);

      // Add wrapping element and set initial width used for positioning
      $btn.wrap("<span class=\"morphing-btn-wrap\"></span>").on("click", function(e) {
        $("#myIframe").attr("src", src);
        e.preventDefault();
        self.start();
      });
    };

    Morphing.prototype.start = function() {
      var self = this;

      if (self.$btn.hasClass("morphing-btn_circle")) {
        return;
      }

      // Set initial width, because it is not possible to start CSS transition from "auto"
      self.$btn.width(self.$btn.width()).parent().width(self.$btn.outerWidth());
      self.$btn.off(".fm").on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
        if (e.originalEvent.propertyName === "width") {
          self.$btn.off(".fm");
          self.animateBg();
        }
      }).addClass("morphing-btn_circle");
    };

    Morphing.prototype.animateBg = function() {
      var self = this;

      self.scaleBg();

      self.$clone.show();

      // Trigger repaint
      self.$clone[0].offsetHeight;

      self.$clone.off(".fm").on("transitionend.fm webkitTransitionEnd.fm oTransitionEnd.fm MSTransitionEnd.fm", function(e) {
        self.$clone.off(".fm");

        self.complete();
      }).addClass("morphing-btn-clone_visible");
    };

    Morphing.prototype.scaleBg = function() {
      var self = this;

      var $clone = self.$clone;
      var scale = self.getScale();
      var $btn = self.$btn;
      var pos = $btn.offset();

      $clone.css({
        top: pos.top + $btn.outerHeight() * 0.5 - ($btn.outerHeight() * scale * 0.5) - $(window).scrollTop() + 160,
        left: pos.left + $btn.outerWidth() * 0.5 - ($btn.outerWidth() * scale * 0.5) - $(window).scrollLeft() + 300,
        width: $btn.outerWidth() * scale,
        height: $btn.outerHeight() * scale,
        transform: "scale(" + (1 / scale) + ")"
      });
    };

    Morphing.prototype.getScale = function() {
      var $btn = this.$btn;

      var radius = $btn.outerWidth() * 0.5;

      var left = $btn.offset().left + radius - $(window).scrollLeft();

      var top = $btn.offset().top + radius - $(window).scrollTop();

      var windowW = $(window).width();

      var windowH = $(window).height();

      var maxDistHor = (left > windowW / 2) ? left : (windowW - left);

      var maxDistVert = (top > windowH / 2) ? top : (windowH - top);

      return Math.ceil(Math.sqrt(Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2)) / radius + 12);
    };

    Morphing.prototype.complete = function() {
      var self = this;
      var $btn = self.$btn;

      $.fancybox.open({
        src: $btn.data("src") || $btn.attr("href")
      }, self.opts);

      $(window).on("resize.fm", function() {
        // self.scaleBg();
      });
    };

    Morphing.prototype.close = function() {
      var self = this;
      var $clone = self.$clone;

      self.scaleBg();

      $clone.one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
        $clone.hide();

        self.$btn.removeClass("morphing-btn_circle");
      });

      $clone.removeClass("morphing-btn-clone_visible");

      $(window).off("resize.fm");
    };

    // Init
    this.each(function() {
      var $this = $(this);

      if (!$this.data("morphing")) {
        $this.data("morphing", new Morphing($this, opts));
      }
    });

    return this;
  };

  // Step 2: Start using it!
  // =======================
  $("[data-morphing]").fancyMorph("#/pages/bigDataflh/housingData");
  $("[data-morphing1]").fancyMorph("#/pages/bigDataflh/customerData");
  $("[data-morphing2]").fancyMorph("#/pages/bigDataflh/newsTrading");
  $("[data-morphing3]").fancyMorph("#/pages/bigDataflh/staffData");
  $("[data-morphing4]").fancyMorph("#/pages/bigDataflh/newsWorkload");
  $("[data-morphing5]").fancyMorph("https://res.5i5j.com/play/index.html?cid=1&hid=41361948&m=zq_syjbl_20&time=1535968208&title=%E4%B8%9A%E4%B8%BB%E6%80%A5%E5%94%AE%EF%BC%8C%E8%BF%91%E6%9C%9F%E5%BF%85%E5%8D%96%EF%BC%81%20%E5%93%81%E8%B4%A8%E5%B0%8F%E5%8C%BA%EF%BC%8C%E6%96%B0%E6%A5%BC%E7%8E%AF%E5%A2%83%E5%A5%BD%EF%BC%8C%E6%A0%BC%E5%B1%80%E6%96%B9%E6%AD%A3%E3%80%82");
  $("[data-morphing6]").fancyMorph("#/pages/bigDataflh/heatMap");
}
export default myJs
